<template>
    <div class="standard_list">
        <Table ref="TabRef" :get-data="pageList" :form-data="state.formData">
            <template v-slot:from_search>
                <el-form-item>
                    <el-select v-model="state.formData.label" placeholder="请选择所属系统"  style="width: 240px" clearable  >
                        <el-option v-for="item in state.sysLables" :key="item.code" :label="item.des" :value="item.code" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" :icon="'Search'">查询</el-button>
                </el-form-item>
            </template>
            <template v-slot:columns>
                <el-table-column property="uri"  show-overflow-tooltip label="url" width="200" />
                <el-table-column property="label.des" label="系统" width="100" />
                <el-table-column property="content" label="编码">
                    <template #default="scope">
                        <div class="log_content">{{ scope.row.content }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="100">
                    <template #default="scope">
                        <el-button size="small" @click="handleDetail(scope.row)">
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </template>
        </Table>
        <el-dialog v-model="dialogVisible" title="Tips" width="1000" :before-close="handleClose">
            <div class="content_dialog">
                {{ currentContent }}
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue"
import Table from '@/components/Table.vue'
import { useRouter } from 'vue-router'
import { pageList } from '@/api/system/errorlog'
import { enums } from '@/api/common/common'

const router = useRouter()
const dialogVisible = ref(false)
const TabRef = ref(null)

const currentContent = ref(undefined)

const state = reactive({
    sysLables:[],
    formData:{
        label: undefined,
    }
})

const search = () => {
    TabRef.value.queryData()
}

const handleDetail = (row) => {
    currentContent.value = row.content
    dialogVisible.value = true
}
const getSysLabel = () => {
    enums('SystemLabel').then(data => {
        state.sysLables = data
    })
}

onMounted(() => {
    getSysLabel()
})


</script>
<style scoped lang="scss">
.standard_list {
    height: 100%;

    .log_content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.content_dialog {
    height: 60vh;
    overflow-y: scroll;
}
</style>
